<template>
	<view class="container">
		<view class="jieLong">
			<view class="jieLong-title">
				<view class="kuaidiname">{{delivery_name}}</view>
				<view class="kuaidi">快递单号：{{waybill_id}} <span class="express" style="margin-left: 20rpx;" @click="duplication()">复制</span></view>
			</view>
		</view>
	
	<!-- 	<view v-if="steam" class="tui-order-list">
			<view class="case" v-for="(item,index) in array" :key="index">
				<view class="waiwei">
					<view>{{item.ftime}}</view>
					<view>{{item.status}}{{item.context}}</view>
				</view>
			</view>
		</view> -->
		<view v-if="steam" class="tui-order-tracking">
			<tui-time-axis>
				<view class="case" v-for="(item,index) in array" :key="index">
					<tui-timeaxis-item backgroundColor="transparent">
						
						<!-- <template v-slot:content> -->
							<view>
								<view class="tui-order-title">{{item.status}}</view>
								<view class="tui-order-desc">{{item.context}}</view>
								<view class="tui-order-time">{{item.ftime}}</view>
							</view>
						<!-- </template> -->
					</tui-timeaxis-item>
				</view>
			</tui-time-axis>
		</view>
		<view v-else class="tui-order-list">
			<view style="padding-top: 220rpx;text-align: center;">
				<image style="height: 180rpx;width: 144rpx;" src="../../static/my/cannotfind.png"></image>
				<view style="line-height: 95rpx;font-size: 28rpx;color: #CCC;">抱歉，物流查询失败</view>
				<view class="bottomcx" @click="loadTop()">重新查询</view>
			</view>
		</view>
		
		<tui-actionsheet :show="showActionSheet" :tips="tips" :item-list="item" :mask-closable="maskClosable" :color="color" :size="size" :is-cancel="isCancel" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>

		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->

	</view>
</template>

<script>
	const dataTime = require('../../utils/util.js');
	import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiButton from "@/components/extend/button/button"
	import tuiLoadmore from "@/components/loadmore/loadmore"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiSticky from "@/components/sticky/sticky"
	import tuiCard from "@/components/card/card"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"
	import tuiModal from "@/components/modal/modal"
	import tuiActionsheet from "@/components/actionsheet/actionsheet"
	
	import tuiListView from "@/components/list-view/list-view"
	
	export default {
		components: {
			tuiTabs,
			tuiButton,
			tuiLoadmore,
			tuiNomore,
			tuiListCell,
			tuiSticky,
			tuiIcon,
			tuiCard,
			tuiTag,
			tuiToast,
			tuiTips,
			tuiActionsheet,
			tuiModal,
			tuiListView,
		},
		data() {
			return {
				parm:{},
				waybill_id: '',
				delivery_id: '',
				delivery_name: '',
				steam: false,
				array: {},
				backgroundColor:"#5677fc",
			}
		},
		onLoad: function(option){
			console.log(option);
			this.delivery_id = option.delivery_id;
			this.waybill_id = option.waybill_id;
			this.delivery_name = option.delivery_name;
			this.loadTop();
			wx.hideShareMenu();
		},
		onShow: function() {
			
		}, 
		methods: {
			duplication: function(){
				wx.setClipboardData({
					data: this.waybill_id,
					success: function (res) {
						wx.hideLoading();
						wx.showModal({
							title: '提示',
							content: '单号复制成功',
							showCancel: false
						});
					}
				})
			},
			loadTop: function(){
				let that = this;
				
				that.tui.request_false('express/path',{
					'waybill_id':that.waybill_id,
					'delivery_id':that.delivery_id
					}).then((res) => {
					if(res.code == '0000'){
						that.steam = true;
						that.array = res.data;
						
					}else{
						let params = {
							title: "未查询到信息",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
						return false;
					}
				}).catch((err) => {
					let params = {
						title: "未查询到信息",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
					return false;
				})
			},
		},

	}
</script>

<style>
	/* @import '../../static/style/thorui.css'; */
	.case{
		background: #FFF;
		padding: 20rpx;
		margin-top: 20rpx;
	}
	.tui-input-box{
		background: #FFFFFF;
		padding-left: 5rpx;
		border-radius: 10rpx;
		border: 1rpx solid #efefef;
		width: 70% !important;
	}
	.jieLong{
		background: #FFFFFF;
		padding: 30rpx 40rpx;
	}
	.jieLong-title{
		font-size: 35rpx !important;
		font-weight: 450;
		margin: 10rpx auto;
	}
	.express{
		color: #1193E3;
		// font-siez: ;
	}
	.kuaidi{
		font-size: 29rpx;
		color: #999;
		text-align: center;
	}
	.kuaidiname{
		text-align: center;
		line-height: 90rpx;
		font-weight: 500;
	}
	.bottomcx{
		font-size: 24rpx;
		color: #FFF;
		height: 55rpx;
		line-height: 55rpx;
		background: #1193E3;
		width: 188rpx;
		margin: 0 auto;
		border-radius: 10rpx;
	}
	// .waiwei{
	// 	width: 90%;
	// 	background: #FFF;
	// 	margin: 0 auto;
	// 	margin-top: 20rpx;
	// 	padding: 20rpx;
	// }
	.tui-time-axis {
		padding-left: 20px;
		box-sizing: border-box;
		position: relative;
	}

	.tui-time-axis::before {
		// content: " ";
		position: absolute;
		left: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-left: 1px solid #ddd;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
	}
	
	
	
	
	
	.tui-order-header {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}
	
	.tui-text {
		font-size: 28rpx;
		color: #333;
		padding: 4rpx;
	}
	
	.tui-bold {
		font-weight: bold;
	}
	
	.tui-node {
		height: 44rpx;
		width: 44rpx;
		border-radius: 50%;
		background-color: #ddd;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		flex-shrink: 0;
	}
	
	.tui-node-dot {
		height: 16rpx;
		width: 16rpx;
		background-color: #ddd;
		border-radius: 50%;
		/* transform: translateY(45%); */
		margin-top: 6rpx;
	}
	
	.tui-bg-primary {
		background: #EB0909 !important;
	}
	
	.tui-order-tracking {
		padding: 30rpx 30rpx 30rpx 40rpx;
		background: #f5f6f8;
		margin-top: 20rpx;
		box-sizing: border-box;
	}
	
	.tui-order-title {
		padding-bottom: 12rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}
	
	.tui-order-desc {
		padding-bottom: 12rpx;
		font-size: 28rpx;
		color: #333;
	}
	
	.tui-ptop {
		display: flex;
		justify-content: flex-start;
		line-height: 28rpx;
	}
	
	.tui-order-time {
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.tui-gray {
		color: #848484 !important;
	}
	
	.tui-light-gray {
		color: #888 !important;
	}
	
	.tui-primary {
		color: #5677fc;
	}
</style>
